{% extends './index.html' %}

{% block title %}开始洗衣{% endblock %}

{% block include %}
<!--引入layui的css文件和js文件-->
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'layui-v2.6.8/layui/css/layui.css' %}" />
<script src="{% static 'layui-v2.6.8/layui/layui.js' %}" type="text/javascript" charset="UTF-8"></script>
<!--引入附加的css文件和startwash.js-->
<link rel="stylesheet" type="text/css" href="{% static 'CSS/index.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'CSS/startwash.css' %}" />
<script src="{% static 'JS/startwash.js' %}" type="text/javascript" charset="UTF-8"></script>
{% endblock %}

{% block subject %}
<div style="margin-top:5%;">
	<!--显示设备ID-->
	<div style="display:flex;justify-content:center;margin-top:5px;">
		<div class="rectangle" style="width:350px;height:50px;display:flex;align-items:center;">
			<div style="font-size:120%;color:#00008B;margin-left:5px;">设备ID:</div>
			<div style="font-size:150%;color:#8B0000;display:flex;justify-content:center;flex:1;">
				{{ washer_id }}
			</div>
		</div>
	</div>
	<!--显示用户ID-->
	<div style="display:flex;justify-content:center;margin-top:5px;">
		<div class="rectangle" style="width:350px;height:50px;display:flex;align-items:center;">
			<div style="font-size:120%;color:#00008B;margin-left:5px;">用户ID:</div>
			<div style="font-size:150%;color:#8B0000;display:flex;justify-content:center;flex:1;">
				{{ user_id }}
			</div>
		</div>
	</div>

	<!--让用户输入一个分钟数，点击开始之后进行倒计时-->
	<div style="display:flex;justify-content:center;margin-top:5px;">
		<div class="rectangle" style="width:350px;height:50px;display:flex;align-items:center;">
			<div style="font-size:145%;margin-left:10px;">
				<select id="time" class="time-list">
					<option value="0" selected disabled="disabled">请选择模式</option>
					<option value="45">大物洗</option>
					<option value="30">标准洗</option>
					<option value="25">快速洗</option>
					<option value="10">单脱水</option>
					<option value="10">桶消毒</option>
					<option value="3">桶自洁</option>
				</select>
			</div>
			<div style="display:flex;justify-content:center;flex:1;">
				<button class="layui-btn layui-btn-radius" id="start" name="start" type="button" onclick="processing()"
					style="font-size:120%;">开始
				</button>
			</div>
		</div>
	</div>

	<!--显示倒计时-->
	<div style="display:flex;justify-content:center;margin-top:5px;">
		<div style="width:18%;display:flex;justify-content:space-around;align-items:center;">
			<div id="minutes" class="rectangle"></div>
			<div class="minutes">
				<div style="font-size:240%;color:blue;">分</div>
			</div>
			<div id="seconds" class="rectangle"></div>
			<div class="seconds">
				<div style="font-size:240%;color:blue;">秒</div>
			</div>
		</div>
	</div>
	<!--点击按钮结束洗衣，提交表单到endwash视图函数进行处理-->
	<form action="/washapp/endwash" method="post">
		{% csrf_token %}
		<div style="display:flex;justify-content:center;margin-top:5px;align-items:center;">
			<!--            <a href="/washapp/endwash/{{washer_id}}" style="text-decoration:none;">-->
			<button class="endwash" type="submit" name="washer_id" value="{{ washer_id }}">点击结束</button>
			<!--            </a>-->
		</div>
	</form>

</div>
<!--轮播图--用于模拟洗衣--O(∩_∩)O--哈哈-->
<div style="margin-top:5px;">
	<div style="display:flex;justify-content:center;">
		<div class="layui-carousel" id="clothes" style="border-radius: 100px;">
			<div class="bucket" carousel-item style="border-radius: 100px;box-shadow: 1px 1px 3px #000000;">
				{% load static %}
				<div class=""><img src="{% static 'img/clothes01.webp' %}"></div>
				<div class=""><img src="{% static 'img/clothes02.webp' %}"></div>
				<div class=""><img src="{% static 'img/clothes03.webp' %}"></div>
				<div class=""><img src="{% static 'img/clothes04.webp' %}"></div>
				<div class=""><img src="{% static 'img/clothes05.webp' %}"></div>
				<div class=""><img src="{% static 'img/clothes06.webp' %}"></div>
				<div class=""><img src="{% static 'img/clothes07.webp' %}"></div>
				<div class=""><img src="{% static 'img/clothes08.webp' %}"></div>
			</div>
			<button class="layui-icon layui-carousel-arrow" lay-type="sub"></button>
			<button class="layui-icon layui-carousel-arrow" lay-type="add"></button>
		</div>
	</div>
</div>
<!--设置轮播图js-->
<script type="text/javascript">
	layui.use('carousel', function() {
		var carousel = layui.carousel;
		// 实例化
		carousel.render({
			elem: '#clothes', // 指向容器选择器-->id='clothes'
			width: '500px', // 设置容器宽度，可设置为px或百分比
			height: '300px', // 设置容器高度
			autoplay: true, // 设置切换方式
			anim: 'default', // 设置轮播方向，此为上下轮播，默认为左右轮播(default)
			interval: 1500, // 设置切换时间，单位ms
		});
	});
</script>
{% endblock %}
